<template>
	<view>
		<view class="content">
			<u-navbar title="灾情上报" :title-size="36" :title-width="500" title-color="#fff"
				back-icon-name="arrow-left" back-icon-color="#fff" :background="background" :custom-back="goBack">
				<view class="navbar-right" slot="right">
					<view class="message-box right-item" style="padding-right: 40rpx; color: white" @click="gohistory">
						历史记录
					</view>
				</view>
			</u-navbar>
			<u-form :model="form" ref="uForm" label-width="160">
				<div class="listBox">
					<u-form-item label="归属事件" prop="incidentName" :required="true">
						<u-input v-model="incidentName" type="select" :border="true" @click="getEventList" placeholder="请选择"/>
					</u-form-item>
					<u-form-item label="受灾区域" prop="regionAffected" :required="true">
						<u-input v-model="form.regionAffected" type="text" :border="true" placeholder="请输入地点"  @click="checkAddress"/>
						<img class="rightIcon" src="../../../assets/images/home/icon_position.png">
					</u-form-item>
					<u-form-item label="所属街道" prop="streetId" :required="true">
						<u-input v-model="streetName" type="select" :border="true" @click="getStreetList" />
					</u-form-item>
					<u-form-item label="受灾时间" prop="disasterTime" :required="true">
						<u-input v-model="form.disasterTime" type="text" :border="true" disabled placeholder="请选择时间"
							@click="chooseTime" />
							<img class="rightIcon" src="../../../assets/images/home/icon_calendar.png">
					</u-form-item>
					<u-form-item label="受淹面积" prop="submergedArea">
						<u-input v-model="form.submergedArea" type="number" maxlength="8" :border="true" placeholder="请输入" />
						<view class="danwei">km²</view>
					</u-form-item>
					<u-form-item class="u-f" label="受淹农作物" prop="submergedNzwArea">
						<u-input v-model="form.submergedNzwArea" type="number" maxlength="8" :border="true" placeholder="请输入" />
						<view class="danwei">km²</view>
					</u-form-item>
					<u-form-item label="受淹乡镇" prop="floodedTowns">
						<u-input v-model="form.floodedTowns" type="number" maxlength="8" :border="true" placeholder="请输入" />
						<view class="danwei">个</view>
					</u-form-item>
					<u-form-item label="受淹道路" prop="floodedRoad">
						<u-input v-model="form.floodedRoad" type="number" maxlength="8" :border="true" placeholder="请输入" />
						<view class="danwei">条</view>
					</u-form-item>
					<u-form-item label="受灾人口" prop="humanAffected">
						<u-input v-model="form.humanAffected" type="number" maxlength="8" :border="true" placeholder="请输入" />
						<view class="danwei">人</view>
					</u-form-item>
				</div>
				<div class="listBox">
				<u-form-item label="因灾死亡失踪人口" prop="humanDeath" class="humanDeath">
					<u-input v-model="form.humanDeath" type="number" maxlength="8" :border="true" placeholder="请输入" />
					<view class="danwei">人</view>
				</u-form-item>
				<u-form-item label="倒塌房屋" prop="buildCounts">
					<u-input v-model="form.buildCounts" type="number" maxlength="8" :border="true" placeholder="请输入" />
					<view class="danwei">户</view>
				</u-form-item>
				<u-form-item label="紧急转移安置人口" prop="humanTransfer"  class="humanDeath">
					<u-input v-model="form.humanTransfer" type="number" maxlength="8" :border="true" placeholder="请输入" />
					<view class="danwei">人</view>
				</u-form-item>
				<u-form-item label="因灾死亡大型牲口" prop="livestockDeath"  class="humanDeath">
					<u-input v-model="form.livestockDeath" type="number" maxlength="8" :border="true" placeholder="请输入" />
					<view class="danwei">头</view>
				</u-form-item>
				</div>
				<div class="listBox" style="padding-bottom: 20px;">
				<u-form-item label="居民住房财产损失" prop="monLoss"  class="humanDeath">
					<u-input v-model="form.monLoss" type="number" maxlength="12" :border="true" placeholder="请输入" />
					<view class="danwei">元</view>
				</u-form-item>
				<u-form-item label="农业损失" prop="nyLoss">
					<u-input v-model="form.nyLoss" type="number" maxlength="12" :border="true" placeholder="请输入" />
					<view class="danwei">元</view>
				</u-form-item>
				<u-form-item label="工业损失" prop="gyLoss">
					<u-input v-model="form.gyLoss" type="number" maxlength="12" :border="true" placeholder="请输入" />
					<view class="danwei">元</view>
				</u-form-item>
				<u-form-item label="商贸损失" prop="smLoss">
					<u-input v-model="form.smLoss" type="number" maxlength="12" :border="true" placeholder="请输入" />
					<view class="danwei">元</view>
				</u-form-item>
				<u-form-item label="救灾投入" prop="jzLoss">
					<u-input v-model="form.jzLoss" type="number" maxlength="12" :border="true" placeholder="请输入" />
					<view class="danwei">元</view>
				</u-form-item>
				<u-form-item label="其他" prop="qtLoss">
					<u-input v-model="form.qtLoss" type="number" maxlength="12" :border="true" placeholder="请输入" />
					<view class="danwei">元</view>
				</u-form-item>
				<div class='checkTitle'>备注说明</div>
				<u-form-item label="" prop="remark">
					<u-input v-model="form.remark" type="textarea" class="textareaBox" height="160" placeholder="文字填写险情原因、影响等" />
				</u-form-item>
				<u-button type="primary" size="default" :ripple='true' style="margin-top: 30rpx;"  @click="save">提交
				</u-button>
				</div>
			</u-form>
			<u-toast ref="uToast" />
			<u-select v-model="show" :list="actionSheetList" @confirm="event"></u-select>
			<u-select v-model="showStreet" :list="streetList" @confirm="street"></u-select>
			<u-picker v-model="showTime" mode="time" :params="params" @confirm="confirm"></u-picker>
			<!-- 底部导航 -->
			<!-- <u-tabbar :list="tabbarList" height="40px"></u-tabbar> -->
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			uni.$on('address',(info)=>{  //开启监听全局的地址改变事件
				this.addressInfo = info.data
				this.form.regionAffected = this.addressInfo.address
		   })
		},
		onLoad(option) {
			this.incidentId = option.incident
			this.streetId = option.streetId
			this.id = option.id
			if (option.incident && option.streetId) {
				let list = {
					incidentId: this.incidentId,
					streetId: this.streetId
				}
				this.$api.reqApi.getIncidentAssessDetails(list).then(res => {
					this.form = res.data
					this.incidentName = res.data.incidentName
					this.streetName = res.data.streetName
				})
			}
		},
		onUnload() {
			// uni.$off('add') //在此生命周期里销毁地址改变事件的监听
			uni.$off('address') 
		},
		data() {
			return {
				incidentId: '',
				streetId: '',
				show: false,
				showStreet: false,
				incidentName: '',
				streetName: '',
				actionSheetList: [],
				streetList: [],
				addressInfo:[],
				form: {
					incident: '', //事件id
					regionAffected: '', //受灾区域
					submergedArea: '', //淹没面积
					submergedNzwArea: '', //淹没农作物面积
					floodedTowns: '', //淹没乡镇数量
					floodedRoad: '', //淹没道路
					humanAffected: '', //受灾人口
					humanDeath: '', //死亡失踪人口
					buildCounts: '', //倒塌房屋
					humanTransfer: '', //转移人口
					livestockDeath: '', //受灾牲口
					monLoss: '', //财产损失
					nyLoss: '', //农业损失
					gyLoss: '', //工业损失
					smLoss: '', //商贸损失
					jzLoss: '', //救灾损失
					qtLoss: '', //其他损失
					streetId: '', //所属街道
					disasterTime: '', //受灾时间
					remark: '', //备注
					attachFiles: [],
					lngLat: [],
					imageFiles: [], //图片 file集合
					videoFiles: [], //视频 file集合
					id: '', //修改时传
				},
				background: {
					backgroundColor: '#4299f7',
				},
				showTime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
				},
				// rules: {
				// 	regionAffected: [
				// 		{
				// 			required: true,
				// 			message: '请选择受灾区域',
				// 			trigger: ['blur']
				// 		},
				// 	],
				// 	incident: [
				// 		{
				// 			required: true,
				// 			message: '请选择归属事件',
				// 			trigger: ['change','blur']
				// 		},
				// 	]
				// }

			}
		},
		computed: {
			tabbarList() {
				return this.$store.state.common.tabbarList
			}
		},
		mounted() {			
			// 事件列表
			this.$api.reqApi.eventList().then(res => {
				if (res.code == 200) {
					this.actionSheetList = res.data.map(item => {
						return {
							value: item.id,
							label: item.name
						}
					})
				}
			})
			// 街道列表
			this.$api.reqApi.streettList().then(res => {
				if (res.code == 200) {
					this.streetList = res.data.map(item => {
						return {
							value: item.id,
							label: item.name
						}
					})
				}
			})
		},
		methods: {
			checkAddress(){
				uni.navigateTo({url: '/pages/local/gaod'});
			},
			gohistory() {
				uni.navigateTo({
					url: '/pages/scheduling/disasterReport/history'
				})
			},
			getStreetList() {
				this.showStreet = true
			},
			getEventList() {
				this.show = true
			},
			chooseTime() {
				this.showTime = true
			},
			event(data) {
				this.incidentName = data[0].label
				this.form.incident = data[0].value
				// console.log(data[0])
			},
			street(data) {
				this.streetName = data[0].label
				this.form.streetId = data[0].value
				// console.log(data[0])
			},
			confirm(data) {
				this.form.disasterTime =
					`${data.year}-${data.month}-${data.day} ${data.hour}:${data.minute}:${data.second}`
			},

			save() {
				
					if (!this.form.incident) {
						this.$refs.uToast.show({
							title: '请选择归属事件',
							type: 'default'
						})
					}else if(!this.form.regionAffected){
						this.$refs.uToast.show({
							title: '请选择受灾区域',
							type: 'default'
						})
					}else if(!this.form.streetId){
						this.$refs.uToast.show({
							title: '请选择所属街道',
							type: 'default'
						})
					}else if(!this.form.disasterTime){
						this.$refs.uToast.show({
							title: '请选择受灾时间',
							type: 'default'
						})
					}
					else{
						var params = {
					incident: this.form.incident,
					regionAffected: this.form.regionAffected,
					submergedArea: this.form.submergedArea,
					submergedNzwArea: this.form.submergedNzwArea,
					floodedTowns: this.form.floodedTowns,
					floodedRoad: this.form.floodedRoad,
					humanAffected: this.form.humanAffected,
					humanDeath: this.form.humanDeath,
					buildCounts: this.form.buildCounts,
					humanTransfer: this.form.humanTransfer,
					livestockDeath: this.form.livestockDeath,
					monLoss: this.form.monLoss,
					nyLoss: this.form.nyLoss,
					gyLoss: this.form.gyLoss,
					smLoss: this.form.smLoss,
					jzLoss: this.form.jzLoss,
					qtLoss: this.form.qtLoss,
					streetId: this.form.streetId,
					disasterTime: this.form.disasterTime,
					remark: this.form.remark,
					id: this.form.id
				};
				this.$api.reqApi.saveDisaster(params).then(res => {
					if (res.code == 200) {
						// uni.switchTab({
						// 	url: '/pages/scheduling/taskManage/index'
						// });
						uni.showToast({
							icon:'none',
						    title:res.message,
							type: 'success',
						})
						this.incidentName = ''
						this.streetName = ''
						this.form ={
							incident: '', //事件id
							regionAffected: '', //受灾区域
							submergedArea: '', //淹没面积
							submergedNzwArea: '', //淹没农作物面积
							floodedTowns: '', //淹没乡镇数量
							floodedRoad: '', //淹没道路
							humanAffected: '', //受灾人口
							humanDeath: '', //死亡失踪人口
							buildCounts: '', //倒塌房屋
							humanTransfer: '', //转移人口
							livestockDeath: '', //受灾牲口
							monLoss: '', //财产损失
							nyLoss: '', //农业损失
							gyLoss: '', //工业损失
							smLoss: '', //商贸损失
							jzLoss: '', //救灾损失
							qtLoss: '', //其他损失
							streetId: '', //所属街道
							disasterTime: '', //受灾时间
							remark: '', //备注
							attachFiles: [],
							lngLat: [],
							imageFiles: [], //图片 file集合
							videoFiles: [], //视频 file集合
							id: '', //修改时传
						}
					this.gohistory()
					}
				})
					}
				
			},
			goBack() {
				uni.navigateBack()
			},
		},
		watch: {
			incidentName(nVal, oVal) {
				if (nVal && this.streetName != '') {
					let ulist = {
						incidentId: this.form.incident,
						streetId: this.form.streetId
					}
					this.$api.reqApi.getIncidentAssessDetails(ulist).then(res => {
						if (res.data) {
							this.form = res.data
							this.incidentName = res.data.incidentName
							this.streetName = res.data.streetName
						}
					})
				}
			},
			streetName(nVal, oVal) {
				if (nVal && this.streetName != '') {
					let ulist = {
						incidentId: this.form.incident,
						streetId: this.form.streetId
					}
					this.$api.reqApi.getIncidentAssessDetails(ulist).then(res => {
						if (res.data) {
							this.form = res.data
							this.incidentName = res.data.incidentName
							this.streetName = res.data.streetName
						}
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		margin-bottom: 40rpx;
	}
	
	.listBox{
		margin-top: 26rpx;
		padding: 0rpx 30rpx;
		background-color: #fff;
		.u-form-item:last-child{
			border-bottom:0
		}
	}

	.danwei {
		// position: absolute;
		// right: 40rpx;
		margin-left: 20rpx;
		color: #999;
	}

	.u-f {
		/deep/ .u-form-item--left {
			width: 180rpx !important;
			flex: 0 0 180rpx !important;
		}
	}

	// /deep/ .u-form-item--left {
	// 	width: 140rpx !important;
	// 	flex: 0 0 140rpx !important;
	// }
	/deep/ .humanDeath .u-form-item__body .u-form-item--left {
		    width: 130px !important;
		    -webkit-box-flex: 0 !important;
		    -webkit-flex: 0 0 130px !important;
		    flex: 0 0 130px !important;
	}
</style>
